
/* Esta es la hoja de estilo de Nuestra Página web akowa.
La página web está subdividida en varias capas.

La primera es la capa menucabecera en donde  en un 
poco espacio horizontal tienes botones a izquierda y derecha.

La segunda capa es la capa cabecera en donde se muestra 
una imagen y el nombre de la aplicación.

Luego estoy pensando en agrupar las siguientes capas en capas más globales
pero de momento se quedaría así:

menu: es un menu desplegable esto es una capa entera que ocupará el 15% de la página aprox.

luego se encuentra

Contenido: es un capa donde encontraremos las funcionalidad pricipal de la página.

menucontenido: es un menu de pestaña que se situa encima del contenido. Este menu sirve por 
si la agenda por ejemplo quieres visualizarla de manera diferente es decir por días o por meses. etc.

luego se encontraría una especie de menulateral.

menulateral: menu desplegable horizontalmente con enlaces para cofigurar el contenido en el que estas
navegando, enlaces con los contactos, etc.

*/


body{
 margin: 0; /* para que no tengan margen el body y empiece desde la posicion 0 */
 
 padding: 0; /* para que no tenga relleno el body y empiece desde la posicion 0 */ 
 background: #F9F38B;
 font: 70% / 160% "verdana", sans-serif;
 color: #192666;
}

a {
    color:#192666;
}

a:hover {
    color:#fFffD7;
}

p {
    margin: 1em 0; /* margen 1em superior y 1em inferior y 0 derecha e izquierda */
    padding: 0; /* no tiene relleno */
}

.clear {
    clear: both; /* La propiedad clear permite modificar el comportamiento por defecto del posicionamiento
flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. La regla CSS
que se aplica al segundo párrafo del ejemplo anterior es la siguiente:*/
 }
 
h1, h2, h3, h4, h5 {
    margin: 1em 0;
    padding:0;
}

h1 {
    font-size: 260%;
    font-family: "georgia", serif;
    font-weight: normal; /*La propiedad font-weight permite establecer el grosor con el que se muestran las letras del texto.*/
    text-align:center;/*La propiedad text-align no sólo alinea el texto que contiene un elemento, sino que también
alinea todos sus contenidos, como por ejemplo las imágenes.*/

}

h2 {
	

    font-size:180%;
    font-family: "georgia", serif;
    font-weight:normal;
  }


h3 {
    font-size:120%;
    font-weight:bold;
  }
  

hr{
	margin: 0; /* Para que la linea no tenga margen  ni tampoco relleno*/
	padding: 0;
	
}

/* ----- Capas -----*/

/* Cualquier elemento irá a la derecha o izquierda en este caso se usa para el menucabecera */
.derecha   { float: right; } 
.izquierda { float: left; }

.menuCabecera {
	
	color: #daf086; /* Por si acaso tienes que escribir en el menuCabecera algo le damos un color distinto al negro para que se vea*/

	background: #000000  0 0;	
	
}
	

	
/* Me quede por aquí los botones de la cabecera*/
.menuCabecera a {
	margin: 5px; /*margen de 5px*/
	color: #000000; /* el color de la letra es negra*/
	font-weight: bold; /* La anchura de texto, es como si lo pusieramos en negrita*/
	cursor: pointer; /*Muestra una mano en vez del raton cuando esta el cursor en el enlace*/
	text-decoration: none; /* No tiene decoración: es decir no está subrayado ni nada parecido*/
	background: #E1FF5E;
	color: #222;
	border: 1px outset #CCC; /*Para crear una especie de boton en un enlace*/
	padding: .1em .5em;

}

/* Cuando este posicionado el cursor en enlace de la cabecera */
.menuCabecera a:hover {
    background: #e1ff88; /*Transformar el color para que se vea más claro*/
    color: #0c209a; /* Color de la letra*/
	text-decoration: underline; /* Subrayado */
  }

#cabecera {
		width:100%; /* La cabecera ocupa todo el ancho de la pagina */
		background:  url("./../imagenes/tene.jpg") 0 0 repeat-x; /* La posición de la cabecera es 0 0 (es decir no se mueve).La imagen se repetirá horizontalmente */
		float: left; 
		
}

/* Este es el menu Lateral de la parte izquierda. Pero es solo la capa no el menu en sí*/
#contenedorMenuLateral {
	float: left; 
	width: 20%; /*El menu lateral ocupa el 20% de la página */
	
}

/* Mirar bien como funciona el menu lateral */
ul.menu {
	width: 180px; /*Tamaño del menu*/
	list-style: none;
	margin: 1em 1em 3em;
	padding: 0;
	border:1px solid #7C7C7C;
	text-indent: 1em; /* Para que la imagen este separada */
}
ul.menu li {
	border-bottom:1px solid #7C7C7C; /*tamaño del borde de abajo*/
	border-top: 1px solid #FFF;
	background: #F4F4F4;
}



ul.menu li a:link, ul.menu li a:visited {
	width: 158px;
	padding: .2em 0 .2em 1.3em;
	display:block;
	text-decoration: none;
	color: #333;
	background: #e1FF29 url(./../imagenes/flecha_inactiva2.png) no-repeat .2em center;
}
ul.menu li a:hover, ul.menu li a:active {
	background:  #cfee29 url(./../imagenes/flecha_activa2.png) no-repeat .2em center;
}


/* Cuando es multiple el color es otro y la imagen puede que variar*/
ul.menu.multiple li a:link, ul.menu.multiple li a:visited {
	
	background: #eac7cd url(./../imagenes/flecha_inactiva.png) no-repeat .2em center;
}

ul.menu.multiple li a:hover, ul.menu.multiple li a:active {
	background:  #fbd8de url(./../imagenes/flecha_activa.png) no-repeat .2em center;
}


/* Esta capa contiene al menucontenido, al contenido, al pie de contenido y al opcionesContenido*/
#contenedorContenido {
	max-width: 70%;
	margin: 5px auto 5px 2%;
	
	float: left;
	
	background: #CCFFFF;
}

/* Esta es la pestaña o el menu que aparece en el contenido*/




/*- Menu pestaña--------------------------- */

     #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #666;
      }
    #tabsF ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }


/* Fin pestaña Contenido */
